.tab-servos {
	.title {
		margin-top: 0;
		line-height: 30px;
		text-align: center;
		font-weight: bold;
		border: 1px solid var(--subtleAccent);
		border-bottom: 0;
		background-color: var(--quietHeader);
		color: var(--quietText);
		border-top-right-radius: 5px;
		border-top-left-radius: 5px;
	}
	table {
		margin-bottom: 10px;
		width: 100%;
		border-collapse: collapse;
		border-left: 0;
		border-right: 0;
		border-top: 0;
		th {
			border-left: 0;
			border-right: 0;
			border-top: 0;
			padding-top: 3px;
			padding-bottom: 3px;
			text-align: center;
			border: 1px solid var(--subtleAccent);
			line-height: 14px;
		}
		td {
			border-top: 0;
			border-bottom: 1px solid var(--subtleAccent);
			border-left: 1px solid var(--subtleAccent);
			border-right: 1px solid var(--subtleAccent);
			padding: 6px 5px 7px 5px;
			&:nth-child(2) {
				width: 140px;
			}
			&:nth-child(3) {
				width: 140px;
			}
			&:nth-child(4) {
				width: 140px;
			}
			&:nth-child(19) {
				width: 110px;
			}
		}
		tr {
			&:nth-child(even) {
				background-color: #f9f9f9;
			}
			td {
				&:first-child {
					text-align: left;
					width: 55px;
				}
			}
		}
		.main {
			font-weight: bold;
			text-align: center;
			background-color: #ececec;
		}
		.channel {
			width: 40px;
			text-align: center;
			input {
				vertical-align: middle;
			}
		}
		input {
			border: 1px solid var(--subtleAccent);
			border-radius: 3px;
		}
		select {
			border: 1px solid var(--subtleAccent);
			border-radius: 3px;
		}
		input[type="number"] {
			display: block;
			width: 100%;
			height: 20px;
			line-height: 20px;
			text-align: right;
		}
	}
	input[type="number"] {
		&::-webkit-inner-spin-button {
			border: 0;
		}
	}
	.directions {
		.direction {
			select {
				height: 19px;
				line-height: 19px;
			}
		}
	}
	.direction {
		.name {
			float: left;
			display: block;
			width: 60px;
		}
		.alternate {
			float: left;
			display: block;
			width: 60px;
		}
		.first {
			float: left;
			margin: 2px 10px 0 20px;
		}
		.second {
			float: left;
			margin: 2px 10px 0 0;
		}
		.rate {
			width: 110px;
			height: 22px;
			text-align: center;
		}
	}
	.live {
		float: left;
		margin-top: 0;
		span {
			float: left;
			margin-right: 10px;
		}
		input {
			float: left;
			margin: 0 0 0 5px;
		}
	}
	.buttons {
		width: calc(100% - 20px);
		position: absolute;
		bottom: 10px;
	}
	.require-support {
		display: none;
	}
	.require-upgrade {
		display: block;
	}
	.wide {
		width: 120px;
	}
	.short {
		width: 40px;
	}
	.table_overflow {
		overflow: auto;
	}
	position: relative;
	.spacer_box {
		padding-bottom: 10px;
		float: left;
		width: calc(100% - 20px);
	}
	.gui_box_titlebar {
		margin-bottom: 0;
	}
	.gui_box {
		margin-bottom: 10px;
		float: left;
		font-weight: bold;
		span {
			font-style: normal;
			font-weight: normal;
			line-height: 19px;
			color: #4f4f4f;
			font-size: 11px;
		}
	}
	.spacer {
		width: calc(100% - 34px);
		margin: 10px;
	}
	.servoblock {
		margin-bottom: 0;
		background-color: #ECECEC;
	}
	.right.servos {
		float: left;
		width: 80%;
	}
	.title2 {
		padding-bottom: 2px;
		text-align: center;
		font-size: 12px;
		font-weight: 300;
	}
	.titles {
		height: 20px;
		li {
			float: left;
			width: calc((100% / 9) - 10px);
			margin-right: 10px;
			text-align: center;
		}
		.active {
			color: green;
		}
	}
	.servos {
		.titles {
			li {
				float: right;
				width: calc((100% / 8) - 10px);
				margin: 0 0 0 10px;
			}
		}
		.m-block {
			float: right;
			width: calc((100% / 8) - 10px);
			margin: 0 0 0 10px;
			border-radius: 3px;
		}
	}
	.m-block {
		float: left;
		width: calc((100% / 9) - 10px);
		height: 100px;
		margin-right: 10px;
		text-align: center;
		background-color: #f4f4f4;
		border-radius: 3px;
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		.meter-bar {
			position: relative;
			width: 100%;
			height: 100px;
			box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			background-color: #E0E0E0;
			border-radius: 3px;
			border: 1px solid #F5F5F5;
		}
		.label {
			position: absolute;
			width: 100%;
			bottom: 45px;
			text-align: center;
			font-weight: bold;
			font-size: 10px;
			color: #474747;
		}
		.label.rpm_info {
			bottom: 28px;
		}
		.indicator {
			.label {
				color: white;
			}
		}
	}
	.indicator {
		position: absolute;
		overflow: hidden;
		width: 100%;
		text-align: center;
		border-radius: 2px;
	}
}
.tab-servos.supported {
	.require-support {
		display: block;
	}
	.require-upgrade {
		display: none;
	}
}
@media all and (max-width: 575px) {
	.tab-servos {
		table {
			th {
				min-width: 30px;
			}
		}
		.min {
			min-width: 60px;
		}
		.max {
			min-width: 60px;
		}
		.middle {
			min-width: 60px;
		}
		.gui_box {
			min-height: auto;
		}
		.servoblock {
			margin-bottom: 15px;
			>.spacer {
				display: flex;
				flex-wrap: wrap;
			}
		}
		.left.motors {
			width: 100%;
			order: 1;
		}
		.right.servos {
			width: 100%;
			order: 3;
			margin-top: 15px;
		}
		.titles {
			li {
				width: calc((100% - 80px) / 9);
				&:last-child {
					margin-right: 0;
				}
			}
		}
		.m-block {
			width: calc((100% - 80px) / 9);
			&:last-child {
				margin-right: 0;
			}
		}
		.servos {
			.m-block {
				width: calc((100% - 70px) / 8);
				&:last-child {
					margin-left: 0;
				}
			}
			.titles {
				li {
					width: calc((100% - 70px) / 8);
					&:last-child {
						margin-left: 0;
					}
				}
			}
		}
		.servo_testing {
			.values {
				li {
					&:last-child {
						margin-left: 4px;
					}
				}
			}
		}
	}
}
@media only screen and (max-width: 1055px) {
	.tab-servos {
		.gui_box {
			span {
				line-height: 17px;
			}
			float: left;
		}
	}
}
@media only screen and (max-device-width: 1055px) {
	.tab-servos {
		.gui_box {
			span {
				line-height: 17px;
			}
			float: left;
		}
	}
}
